<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script>
	<% if(request.getAttribute("pjax_back") != null && !request.getAttribute("pjax_back").equals("")) {%> 
		<%=(String)request.getAttribute("pjax_back") %>
	<% } %>
	</script>
	<style type="text/css">
.body_top>div{
	width: 900px;
	height: 85px;

	margin:0 auto;
	padding-top:10px; 
}
.body_top>div>p{
	font-family:"微软雅黑";
	color: #90c624;
	font-size:40px;
	font-weight:900;
	display: inline-block;
}
.body_top>div>span{
	font-size: 14px;
	color: #8f8f8f;
	float: right;
	margin-top: 20px;
}
.body_top>div>a>img{
	float: right;
	margin: 17px 5px;
}
.body_top>div>div{
	display: inline-block;
}
.body_top>div>div>p{
	font-weight:500;
	letter-spacing: 2px;
	font-size: 18px;
	color: #8f8f8f;
}
.body_top>div>div>.last_p{
	color: #90c624;
	font-size: 12px;
	letter-spacing: 0px;
}
.body_wrap{
	width: 100%;
	background: #f7f7f7;
}
.body_wrap .middle{
	width: 900px;
	height: 700px;
	margin: 0 auto;
}
.body_wrap .middle .left {
	float: left;
	height: 630px;
}

.body_wrap .left_top {
	background: #90c624;
	width: 180px;
	height: 120px;
	color: #fff;
	padding-top: 20px;
	font-size: 20px;
	text-align: center;
}

.body_wrap .left_top .last_p {
	font-size: 16px;
}

.body_wrap .left_botton {
	width: 180px;
	height: 200px;
	background: #fff;
	font-size: 15px;
	color: #6d6d6d;
}

.body_wrap .left_botton>p>a {
	display: inline-block;
	padding: 10px 58px;
	text-decoration: none;
	color: #848482;
}

.body_wrap .left_botton>p>a:hover {
	background: #f0f0f0;
	border-left: 3px solid #96c720;
}
.body_wrap .right{
	float: left;
	width: 690px;
	height:700px;
}
#each_div{
	width:650px;
	height: 630px;
}
#each_div>div{
	float: left;
	margin:0px 0px 30px 70px;
}
#each_div>div>div{
	width: 130px;
	margin:0 0 10px 0;
}
#each_div>div>div>a>img{
	border:1px solid #fff;
	width: 150px;
 	height: 150px;
}
#each_div>div>p{
	display: inline-block;
	width: 130px;
	text-align: center;
	font-size: 14px;
}
</style>

	<div id="contents">
	<div class="body_top">
		<div>
			<p>项目介绍</p>
		    <div>
			    <p>TEAM DISPLAY</p>
			    <p class="last_p">THE BEAST PEOPLE FORMULA FOR GREAT WEBSITES</p>
		    </div>
		    <a href="index_xmzs">
		    <img src="img/btn.png">
		    </a>
		    <span>当前位置：<span>首页</span>><span>项目介绍</span></span>
		</div>
	</div>
	<div class="body_wrap">
		<div class="middle">
		<div class="left">
			<div class="left_top">
				<p>PROJECT DISPLAY</p>
				<p>COUNSELING</p>
				<p class="last_p">项目介绍</p>
			</div>
			<div class="left_botton">
				<p><a class="pjax" href="index_xmzs?type=1">最近项目</a></p>
				<!-- <p><a class="pjax" href="index_xmzs?type=2">成功案例</a></p> -->
			</div>
		</div>
		<div id="main_right" class="right">
		
			<div id="each_div" class="clearfix">
			<c:forEach items="${requestScope.lists }" var="pro">
		    <div>
		        <div>
		        	<a class="turn_pjax" href="pro?id=${pro.get(0).p_id}" target="_blank">
		        	<img src='img/gongsi.png'></img>
		        	<%-- <img src="${pro.get(0).p_logo == null ? 'img/gongsi.png': ${pro.get(0).p_logo}" alt="项目图片"> --%>
		        	</a>
		        </div>
				<p>${pro.get(0).p_name}</p>
				<%-- ,融资额￥${pro.get(3).pi_amount} --%>
			</div>
			</c:forEach>
			</div>
			<div class="fy" title="${sum != null?sum:1 }">
			<span id="pre_page">上一页</span>
			<ul>
			</ul>
			<span id="next_page">下一页</span>
		</div>
		</div>
	</div>
	</div>
	</div>
<script type="text/javascript" src="js/pages.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
	/*  index_paging?html=pros&&page=1 */
	 var kind="pros";
	  var type=location.search.split("?")[1]; 
	   var sum =$("div.fy").attr("title"); 
	    var connect_page=0;
	    printList(1);
   function printList(index){
     var fy_html="";
     var show = sum-index>7?8:sum-index+1;
     if(index<=connect_page){
         for(var i=8;i>0;i--){
             fy_html+="<li>"+(index-i+1)+"</li>";
         }
         $(".fy>ul").html(fy_html);
         $(".fy>ul>li").eq(7).addClass('fy_on');
     }else{
         for(var i=0;i<show;i++){
             fy_html+="<li>"+(index+i)+"</li>";
         }
         $(".fy>ul").html(fy_html);
         $(".fy>ul>li").eq(0).addClass('fy_on');
     }
     connect_page=index;
     console.log(connect_page)
 }
	    //点击分页  分别触发ajax事件以及分页列表事件
	    $(".fy>ul").delegate('li','click',function(){
	        
	        $(this).addClass('fy_on');
	        $(this).siblings("li").attr("class","");
	        var page = $(this).html();
	        if(sum>8&&(page%7==1)&&page>7){
	            printList(Number(page));
	            }else{
	                connect_page=page;
	            }
	            connect_data(kind,page,type);
	            
	        })
	$("#pre_page").click(function(){
     var pre_page=(connect_page-1)%7;
     pre_page= pre_page==0?7:pre_page;
     $("div.fy>ul>li").eq(pre_page-1).trigger("click");
 });
 
  $("#next_page").click(function(){
     var next_page=(Number(connect_page)+1)%7;
      next_page= next_page==0?7:next_page ;
      next_page= next_page==1?8:next_page ;
     $("div.fy>ul>li").eq(next_page-1).trigger("click");
 }) 
 
	
 // 上一页  and 下一页

 function connect_data(kind,page,type){
     type= (type == undefined?"":"&&"+type);
     var address ="index_paging?html="+kind+type+"&&page="+page;
     console.log(address);
     getData(address,printNews)
 }
 // ajax传值取相应数据
 function getData(address,callback){
     $.ajax({
         type:"post",
         url:address,
         dataType:"json",
         success:function(data){
             callback(data);
         },
         error:function(e){
             alert(e.message);
         }
     });
 }
		
	//回调函数渲染页面
	function printNews(data){
		var team_html="";
		$.each(data.paging,function(){
			var that=this.list;
			var logo=that[0].p_logo;
			logo=logo==null?"img/gongsi.png":logo;
			team_html+="<div><div><a class=\"turn_pjax\" href=\"pro?id="+that[0].p_id+"\"><img src=\""+logo+"\"></a></div><p>"+that[0].p_name+"</p></div>";
		});
		
		$("#each_div").html(team_html);
	}
})
</script>
	